<template>
    <el-tabs v-model="activeName">
        <el-tab-pane v-for="(item,index) in tabsList"
                     :key="index"
                     :label="item.label"
                     :name="item.name">
            <ul class="icon-list">
                <li v-for="(icon,i) in item.iconList"
                    :key="i"
                    @click="onClickIcon(icon)">
                    <i :class="[activeName==='second'?'iconfont':'',icon]"></i>
                </li>
            </ul>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
import iconfont from "@/assets/font/iconfont.json";
const iconList = iconfont.glyphs.map((v) => "cboard" + v.font_class);
export default {
    data() {
        return {
            activeName: "first",
            tabsList: [
                {
                    label: "基本图标",
                    name: "first",
                    iconList: [
                        "el-icon-s-tools",
                        "el-icon-setting",
                        "el-icon-delete-solid",
                        "el-icon-delete",
                    ],
                },
                {
                    label: "阿里云图标",
                    name: "second",
                    iconList: iconList,
                },
                {
                    label: "符号图标",
                    name: "third",
                    iconList: [
                        "el-icon-sunny",
                        "el-icon-light-rain",
                        "el-icon-lightning",
                        "el-icon-heavy-rain",
                        "el-icon-sunrise",
                        "el-icon-sunrise-1",
                        "el-icon-sunset",
                        "el-icon-cloudy",
                        "el-icon-partly-cloudy",
                        "el-icon-cloudy-and-sunny",
                        "el-icon-moon",
                        "el-icon-moon-night",
                    ],
                },
            ],
        };
    },
    methods: {
        onClickIcon(icon) {
            if (this.activeName === "second") {
                icon = "iconfont " + icon;
            }
            this.$emit("click-node", icon);
        },
    },
};
</script>
<style lang="scss" scoped>
.icon-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    > li {
        $size: 60px;
        width: $size;
        height: $size;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        > i {
            font-size: 32px;
            transition: 0.3s;
            &:hover {
                transform: scale(1.2);
            }
        }
    }
}
</style>
